<!--
 * @Description  : 封装 公共组件 菜单栏
 * @Author       : 袁振 🎈
 * @EditTime     : 2023-11-16
 * @Copyright    ：2023 by yuanzhen, All Rights Reserved.
-->
<template>
  <div class="menu-container">
    <!-- 菜单导航栏 -->
    <el-menu
      router
      :unique-opened="true"
      :mode="menuConfigs.mode"
      :default-active="routePath"
      :background-color="menuConfigs.backgroundColor"
      :text-color="menuConfigs.textColor"
      :active-text-color="menuConfigs.activeTextColor"
      @select="handleSelect"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="(item, index) in menuConfigs.menuData" :key="index">
        <template v-if="!item.children">
          <el-menu-item :index="item.path">{{ item.title }}</el-menu-item>
        </template>

        <template v-else>
          <el-sub-menu :index="item.title">
            <template #title>{{ item.title }}</template>
            <el-menu-item
              v-for="subItem in item.children"
              :key="subItem"
              :index="subItem.path"
              >{{ subItem.title }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";

const route = useRoute();
// const routePath = computed(() => {
//   return route.path;
// });
let routePath = route.path;

// 接收配置数据
const props = defineProps({
  menuConfigs: {
    type: Object,
    default: () => ({}),
  },
});

const handleSelect = (key: string, keyPath: string[]) => {};
const handleOpen = (key: string, keyPath: string[]) => {};
const handleClose = (key: string, keyPath: string[]) => {};
</script>

<style lang="scss" scoped>
.menu-container {
  width: 100%;
  .el-menu {
    border-bottom: 0px;
  }
}
</style>